<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <base th:href="${#request.getContextPath()}+'/'">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" th:href="@{/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/bootstrap-3.3.7/css/bootstrap.css}"/>
    <style type="text/css">
        .order_detail{
            background-color: white;
            border: 1px solid black;
            border-right: 0;
            height: 40px;
            line-height: 40px;
        }
        .order_detail input{
            height: 30px;
            text-align: center;
        }
        .order_add{
            border: 1px solid black;
        }
        #order_detail{
            text-align: center;
        }

    </style>
</head>
<body>

<article class="page-container">
    <form class="form form-horizontal" method="post" id="orderForm" th:action="@{{path}(path=${order eq null ? 'order/insert' : 'order/update'})}">
        <!-- 隐藏域 ，订单状态-->
        <input type="hidden" name="orderStatus" value="1">
        <!-- 隐藏域 ，订单id-->
        <input type="hidden" name="orderId" th:value="${order?.orderId}">

        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">业务员：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="adminId">
                        <option value="0">请选择</option>

                        <option th:selected="${obj.adminId eq order?.adminId}" th:each="obj:${admins}" th:value="${obj.adminId}" th:text="${obj.realname}" ></option>

                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">客户：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="customerId" id="customer" required="required">
                        <option value="0">请选择</option>

                        <!--
                               在html5中有一个自定义属性功能，用于存储数据，以便开发中使用

                               data-xxx
                               data-固定语法
                               xxx 当前自定义属性名称（见名之意）,不能用驼峰命名发，html属性不区分大小写，多个单词用 _隔开
                               如 data-base_id ， data-price  data-product_name

                               thymeleaf 使用 th: 前缀

                             -->

                        <option th:selected="${obj.customerId eq order?.customerId} ? true : false" th:data-base_id="${obj.baseId}"   th:each="obj:${customers}" th:value="${obj.customerId}" th:text="${obj.customerName}" ></option>


                    </select>
                </div>
            </div>

            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">到达区域：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select id="region" name="region">
                        <option value="0">请选择</option>

                        <!--
                              在html5中有一个自定义属性功能，用于存储数据，以便开发中使用

                              data-xxx
                              data-固定语法
                              xxx 当前自定义属性名称（见名之意）,不能用驼峰命名发，html属性不区分大小写，多个单词用 _隔开
                              如 data-base_id ， data-price  data-product_name

                              thymeleaf 使用 th: 前缀

                            -->
                        <option th:selected="${obj.baseName eq order?.region}  ? true : false"   th:each="obj:${regions}" th:data-base_id="${obj.baseId}"  th:value="${obj.baseName}" th:text="${obj.baseName}" ></option>

                    </select>
                </div>
            </div>
        </div>


        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.shipperAddress}"  placeholder="" id="shipperAddress" name="shipperAddress">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.shipperName}"   placeholder="" id="shipperName" name="shipperName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.shipperPhone}"   placeholder="" id="shipperPhone" name="shipperPhone">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">付款方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="paymentMethod">
                        <option th:selected="${obj.baseName eq order?.paymentMethod}  ? true : false"   th:each="obj:${payments}" th:text="${obj.baseName}" th:value="${obj.baseName}" ></option>

                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">货运方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="freightMethod">
                        <option th:selected="${obj.baseName eq order?.freightMethod}  ? true : false"   th:each="obj:${freights}" th:text="${obj.baseName}" th:value="${obj.baseName}" ></option>

                    </select>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件方式：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <select name="takeMethod">
                        <option th:selected="${obj.baseName eq order?.takeMethod}  ? true : false"   th:each="obj:${fetchTypes}" th:text="${obj.baseName}" th:th:value="${obj.baseName}" ></option>

                    </select>
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">物流公司：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="xx物流公司"  disabled="disabled"  placeholder="" id="customerName" name="customerName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">快递单号 ：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="243242343" disabled="disabled"   placeholder=""  name="customerName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收件人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="仓管员A(隔壁老王)" disabled="disabled"   placeholder=""  name="customerName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">收货地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" value="广州市天河区xxx" disabled="disabled"   placeholder="" name="customerName">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="135xxxxx"  disabled="disabled"  placeholder=""  name="customerName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件地址：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.takeAddress}"   placeholder="" name="takeAddress">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">联系电话：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.takePhone}"   placeholder="" id="takePhone" name="takePhone">
                </div>
            </div>
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">取件联系人：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <input type="text" class="input-text" th:value="${order?.takeName}"   placeholder="" id="takeName" name="takeName">
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-4 col-sm-4">
                <label class="form-label col-xs-4 col-sm-4">订单备注：</label>
                <div class="formControls col-xs-8 col-sm-8">
                    <textarea name="orderRemark" cols="" rows="" class="textarea" th:value="${order?.orderRemark}" th:text="${order?.orderRemark}" ></textarea>
                </div>
            </div>
        </div>

        <div id="order_detail" class="row cl">
            <div  class="col-xs-2 col-sm-2 order_detail">货物名称</div>
            <div  class="col-xs-1 col-sm-1 order_detail">数量</div>
            <div  class="col-xs-1 col-sm-1 order_detail">单位</div>
            <div  class="col-xs-2 col-sm-2 order_detail">单价</div>
            <div  class="col-xs-2 col-sm-2 order_detail">总价值</div>
            <div  class="col-xs-3 col-sm-3 order_detail">备注</div>
            <div  class="col-xs-1 col-sm-1 order_detail order_add">
            <span style="font-size: 15px;cursor: pointer;color: green"
                  class="glyphicon glyphicon-plus"
                  onclick="add_goods_detail();"></span>
            </div>

            <div  th:if="${order == null}"  class="goods_detail" id="goods_detail">
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="text" name="orderDetails[][goodsName]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail">
                    <input type="text" size="3" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail">
                    <select name="orderDetails[][goodsUnit]">
                            <option th:each="obj:${units}" th:value="${obj.baseName}" th:text="${obj.baseName}"></option>
                    </select>
                </div>
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="text"  onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">

                </div>
                <div  class="col-xs-2 col-sm-2 order_detail">
                    <input type="text" readonly="readonly" name="orderDetails[][goodsTotal]">
                </div>
                <div  class="col-xs-2 col-sm-3 order_detail">
                    <input type="text" name="orderDetails[][goodsRemark]">
                </div>
                <div  class="col-xs-2 col-sm-1 order_detail order_add">
					<span id="removeSpan" style="font-size: 15px;cursor: pointer;color: red"
                          class="glyphicon glyphicon-remove"
                          onclick="remove_goods_detail(this);"
                    ></span>
                </div>
            </div>

            <div th:if="${order !=null}">
                <div th:each="orderDetail:${order.orderDetails}" id=""  class="goods_detail">
                    <div  class="col-xs-2 col-sm-2 order_detail">
                        <input type="text" th:value="${orderDetail.goodsName}" name="orderDetails[][goodsName]">
                    </div>
                    <div  class="col-xs-2 col-sm-1 order_detail">
                        <input type="text" size="3" th:value="${orderDetail.goodsNumber}" onkeyup="operationTotalPrice(this);"  name="orderDetails[][goodsNumber]">
                    </div>
                    <div  class="col-xs-2 col-sm-1 order_detail">
                        <select name="orderDetails[][goodsUnit]">
                                <option th:each="obj:${units}" th:selected="${obj.baseName eq orderDetail.goodsUnit} ? true : false" th:value="${obj.baseName}" th:text="${obj.baseName}"></option>
                        </select>
                    </div>
                    <div  class="col-xs-2 col-sm-2 order_detail">
                        <input type="text" th:value="${orderDetail.goodsUnitPrice}"   onkeyup="operationTotalPrice(this);" name="orderDetails[][goodsUnitPrice]">

                    </div>
                    <div  class="col-xs-2 col-sm-2 order_detail">
                        <input type="text" th:value="${orderDetail.goodsTotal}"  readonly="readonly" name="orderDetails[][goodsTotal]">
                    </div>
                    <div  class="col-xs-2 col-sm-3 order_detail">
                        <input type="text" th:value="${orderDetail.goodsRemark}" name="orderDetails[][goodsRemark]">
                    </div>
                    <div  class="col-xs-2 col-sm-1 order_detail order_add">
                        <span id="removeSpan" style="font-size: 15px;cursor: pointer;color: red"
                              class="glyphicon glyphicon-remove"
                              onclick="remove_goods_detail(this);"
                        ></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-12 col-sm-12 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<script type="text/javascript" th:src="@{lib/jquery-1.11.3/jquery.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.serializejson/jquery.serializejson.min.js}"></script>
<script type="text/javascript" th:src="@{lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" th:src="@{h-ui.admin/js/H-ui.admin.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript">


    $(function(){
        $("#orderForm").validate({
            rules:{
                adminId:{
                    min:1
                },
                intervalId:{
                    min:1
                },
                customerId:{
                    min:1
                },
                shipperName:{
                    required:true
                }
            },
            messages:{
                adminId:{
                    min:"请选择业务员"
                },
                intervalId:{
                    min:"请选择客户的区间"
                },
                customerId:{
                    min:"请选择客户"
                },
                shipperName:{
                    required:"请选择收货人"
                }
            },
            submitHandler:function(form){

                //格式化表单为JSON数据
                var obj = $("#orderForm").serializeJSON();
                //将JSON对象转换成json格式的字符串
                var jsonStr = JSON.stringify(obj);
                console.log(typeof obj,obj);
                console.log(typeof jsonStr,jsonStr);

                //使用ajax发送请求
                $.ajax({
                    type: "POST",
                    url: $("#orderForm").prop("action"),
                    data:jsonStr,
                    /*指定ajax提交的内容类型，就是json格式数据*/
                    contentType:"application/json",
                    success:function(data){
                        layer.msg(data.msg,{icon:data.code},function(){
                            //操作数据成功
                            if(data.code == 1){
                                //先刷新父页面表格（当前页面是adminManager页面弹出来的子页面，所以刷新父页面）
                                parent.refreshTable();
                                //父页面adminManager关闭弹出子页面
                                parent.layer.closeAll();
                            }
                        });
                    }
                })

            }
        })

    })



    /* 计算每一行的 单价*数量=总价 */
    function operationTotalPrice(obj){

        //1.获取当前文本框父元素的父元素（最外层div）下面的所有input表单
        var inputs = $(obj).parent().parent().find("input");

        console.log(inputs);

        //将第二个和第三个文本框的内容获取设置为第四个文本框的值
        var goodsNumber = $(inputs[1]).val();
        var goodsUnitPrice = $(inputs[2]).val();
        if(goodsNumber > 0 && goodsUnitPrice > 0){
            $(inputs[3]).val(goodsNumber * goodsUnitPrice);
        }


    }


    /**
     * 删除货品表单
     * @param obj 删除按钮本身
     */
    function remove_goods_detail(obj){
        //通过类选择器获取所有的货品表单对应的div
        var goodsDetail = $(".goods_detail");
        if(goodsDetail.length  == 1){
            layer.tips('亲，最少保留一个货品明细', $(obj));
            return false;
        }
        //删除当前按钮的父元素的父元素
        $(obj).parent().parent().remove();

    }

    //新增货品表单
    function add_goods_detail(){
       //克隆一份订单明细表单元素
       var goodsDetailClone =  $(".goods_detail").first().clone();

       //清空所有表单元素的数据
        goodsDetailClone.find("input").val("");


       //追加到外层div id=order_detail中
        $("#order_detail").append(goodsDetailClone);
    }


   $(function(){

       //1.为 客户下拉框绑定onChange事件
       $("#customer").change(function(){
           //获取客户下拉框被选中 data-base_id的值（基础数据中 区间的id）
           var regionId = $("#customer option:selected").data("base_id");
           console.log(regionId);
           //获取区间下拉框中的所有的option，并判断 base_id 的值是否和 上面 regionId的相等，相等就选中即可
          var options =  $("#region option");

          $.each(options,function(index,option){
                //获取每个option选项的 data-base_id的值
              var baseId = $(option).data("base_id");
              if(regionId == baseId){
                  $(option).prop("selected",true);
              }
          });
       });

   })


</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>